<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery核心函数</title>
	</head>
	<body>
		<div>
			<button id="btn">测试</button>
			<br/>
			
			<input type="text" name="msg1"/><br/>
			<input type="text" name="msg2"/><br/>		
		</div>
		
		
		<!-- 1.作为一般函数调用:$(param)
		  1).参数为函数:当DOM加载完成后，执行此回调函数
		  2).参数为选择器字符串:查找所有匹配的标签，并将它们封装成jQuery对象
		  3).参数为DOM对象:将dom对象封装成jQuery对象
		  4).参数为html标签字符串(用得少)：创建标签对象并封装成jQuery对象
		2.作为对象使用：$.xxx()
		  1). $.each():隐式遍历数组
		  2). $.trim():除去两端的空格 -->
		<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			// 需求1.点击按钮:显示按钮的文本,显示一个新的输入框,
			// 需求2.遍历输入数组中的所有元素值
			// 需求3.去掉"  my atguigu  "两端的空格
			
			// 需求1.点击按钮:显示按钮的文本,显示一个新的输入框,
			// 1.1).参数为函数:当DOM加载完成后，执行此回调函数
			$(function(){//绑定文档加载完成后的监听
				// 1.2).参数为选择器字符串:查找所有匹配的标签，并将它们封装成jQuery对象
				$('#btn').click(function(){//绑定点击事件监听
					// this是什么？发生事件的dom元素(<button>)
					// alert(this.innerHTML);
					// 1.3).参数为DOM对象:将dom对象封装成jQuery对象
					alert($(this).html())
					// 1.4).参数为html标签字符串(用得少)：创建标签对象并封装成jQuery对象
					$('<input type="text" name="msg3"/><br/>').appendTo('div')
				})
			})
			
			// 需求2.遍历输入数组中的所有元素值
			// 2.1). $.each():隐式遍历数组
			var arr = [2,4,7]
			$.each(arr,function(index,item){
				console.log(index,item)
			})
			// 2.2). $.trim():除去两端的空格
			var str = "  my atguigu  "
			console.log('---'+str.trim()+'---')
			console.log('---'+$.trim(str)+'---')
		</script>
	</body>
</html>
